<template>
  <!-- 网络广播 -->
  <div class="Webcasts">
    <div class="title">
      <Title>
        网络广播
      </Title>
      </div>

    <div class="body">
      <div class="info" v-for="item in Info">
        <span class="logo"></span>
        <span class="text">{{item.value}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Title from './Title.vue'
export default {
 components: {
    Title
  },
  data(){
    return {
      Info:[
        { key:1,value:"公告通知注意防控，外来人禁止入内禁止内的哈哈哈哈"},
        { key:2,value:"公告通知注意防控，外来人禁止入内禁止内"},
        { key:3,value:"公告通知注意防控，外来人禁止入内禁止内"},
        { key:4,value:"公告通知注意防控，外来人禁止入内禁止内"},
        { key:5,value:"公告通知注意防控，外来人禁止入内禁止内"},
        { key:6,value:"公告通知注意防控，外来人禁止入内禁止内"},
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.Webcasts {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    flex: 1;
  }
  .body {
    overflow:hidden;
    width: 100%;
    flex: 6;
    padding-top: .154125rem /* 12.33/80 */;
    .info {
      overflow: hidden;
      width: 4.85rem /* 388/80 */;
      height: .2875rem /* 23/80 */;
      margin-left: .25rem /* 20/80 */;
      margin-bottom: .20675rem /* 16.54/80 */;
    }
  }
  .logo {
    display: inline-block;
    width: .222875rem /* 17.83/80 */;
    height: .222875rem /* 17.83/80 */;
    background: url(../../../assets/Home/gonggao.png);
  }
  .text {
    display: inline-block;
    height: 100%;
    width: 4.075rem /* 326/80 */;
    margin-left:.135rem /* 10.8/80 */ ;
    overflow: hidden;
    color: white;
    font-size: .196625rem /* 15.73/80 */ ;
    line-height: .26975rem /* 21.58/80 */;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
}
</style>